<template>
  <!-- 出库管理（待审核）详情 -->
  <view class="toBeReviewed">
    <view class="top">
      <van-cell-group>
        <van-field 
		  :value="form.material_taker" 
		  label="领料人："
		></van-field>
        <van-field
          :value="form.reason_for_delivery"
          label="出库原因:"
        ></van-field>
        <van-field
          :value="form.expect_time"
          title-width="98"
          label="期望领用时间："
        ></van-field>
      </van-cell-group>
    </view>
    <view class="content">
      <view class="title">
        <view class="title_left">采购商品明细</view>
        <view class="title_right">
          <view>共<text>3</text>件商品</view>
          <view class="total">总计：<text>￥200.00</text></view>
        </view>
      </view>
      <view class="list_box">
        <view
          class="list_item" v-for="(item, index) in delivery_Application_FormList" :key="index">
          <view class="list_item_title">
            <view class="name">
              <view class="point"></view>
              <view>品名：{{ item.name }}</view>
            </view>
            <view> 数量：{{ item.quantity }} </view>
          </view>
          <view class="type-inventory">
            <view>使用类型：{{ item.type_of_use }}</view>
            <view>库存：{{ item.inventory }}</view>
          </view>
          <view class="subtotal">
            小计：<text>￥{{ item.subtotal }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="current_state-box">
      <view class="current_state"> 当前状态（食堂负责人审核中......） </view>
      <view class="state_box"> 待审核 </view>
    </view>
    <view class="btn-box">
      <van-button color="#62B158" type="info" @click="goApplicationForm" >申请单</van-button >
      <van-button color="#1E2452" type="info" @click="goOutboundOrder">出库单</van-button>
      <van-button color="#EF9C2B" type="info" @click="examine">审核</van-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        material_taker: "张三",
        reason_for_delivery: "-",
        expect_time: "2023-8-10",
      },
      delivery_Application_FormList: [
        {
          name: "玉米胚芽油-1*4*5L",
          quantity: "1桶", // 数量
          type_of_use: "学生", // 使用类型
          inventory: 2, // 库存
          subtotal: 234, //小计
        },
        {
          name: "玉米胚芽油-1*4*5L",
          quantity: "1桶", // 数量
          type_of_use: "学生", // 使用类型
          inventory: 2, // 库存
          subtotal: 234, //小计
        },
        {
          name: "玉米胚芽油-1*4*5L",
          quantity: "1桶", // 数量
          type_of_use: "学生", // 使用类型
          inventory: 2, // 库存
          subtotal: 234, //小计
        },
        {
          name: "玉米胚芽油-1*4*5L",
          quantity: "1桶", // 数量
          type_of_use: "学生", // 使用类型
          inventory: 2, // 库存
          subtotal: 234, //小计
        },
      ],
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad() {},
  methods: {
    // 申请单
    goApplicationForm() {
      uni.navigateTo({
        url: "../outboundManagement/deliveryApplicationForm",
      });
    },
    // 出库单
    goOutboundOrder() {
      uni.navigateTo({
        url: "../outboundManagement/outboundOrde",
      });
    },
    // 审核
    examine() {
      uni.navigateTo({
        url: "../outboundManagement/canteenSupervisorAudit",
      });
    },
  },

  mounted() {},

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "出库管理（待审核）详情",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss" >
.toBeReviewed {
  height: 100%;
  min-height: 100vh;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 20rpx;
  .top {
    background: rgba(255, 255, 255, 1);
  }
  .content {
    .title {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        font-size: 26rpx;
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        display: flex;
        justify-content: space-between;
        color: rgba(153, 153, 153, 1);
        font-size: 26rpx;
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }

        .total {
          margin-left: 10rpx;

          text {
            font-weight: bold;
            color: #d12312;
          }
        }
      }
    }

    .list_box {
      .list_item {
        width: 100%;
        // height: 160rpx;
        line-height: 55rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;
        border-bottom: 0.5rpx solid #e7e4e4;

        .list_item_title {
          display: flex;
          justify-content: space-between;

          .name {
            display: flex;
            color: rgba(16, 16, 16, 1);
            font-size: 28rpx;
            font-family: SourceHanSansSC-bold;
            align-items: center;
            font-weight: bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              border-radius: 50%;
              background: rgba(98, 177, 88, 1);
              margin-right: 10rpx;
            }
          }
        }

        .type-inventory {
          display: flex;
          justify-content: space-between;

          text {
            color: red;
          }
        }

        .subtotal {
          display: flex;
          justify-content: flex-end;

          text {
            color: red;
          }
        }
      }
    }
  }
  // 当前状态
  .current_state-box {
    width: 100%;
    margin-top: 32rpx;
    .current_state {
      line-height: 50rpx;
    }

    .state_box {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Arial;
      color: #d12312;
      margin-top: 18rpx;
    }
  }
  .btn-box {
    display: flex;
    justify-content: space-evenly;
    margin-top: 50rpx;
    margin-bottom: 50rpx;

    ::v-deep .van-button {
      width: 170rpx;
      height: 72rpx;
      border-radius: 8rpx;
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Microsoft Yahei;
    }
  }
}
</style>